<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    th {
      background-color: aqua;
    }
    #btn {
      width: 100px;
      height: 30px;
      background-color: burlywood;
    }
    input {
      border: none;
      outline: none;
      text-align: center;
    }
    #one {
      border: 1px solid red;
    }
  </style>
  <body>
    <input type="text" id="one" /><button id="ss">搜索名字</button>
    <table border="1" style="width: 500px" id="ta">
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>
          <input
            type="text"
            value="小明"
            style="text-align: center; border: none; outline: none"
          />
        </td>
        <td>
          <input
            type="text"
            value="男"
            style="text-align: center; border: none; outline: none"
          />
        </td>
        <td>
          <input
            type="text"
            value="15"
            style="text-align: center; border: none; outline: none"
          />
        </td>
        <td>
          <input
            type="text"
            value="26324"
            style="text-align: center; border: none; outline: none"
          />
        </td>
        <td><input type="button" value="删除" onclick="delecttr(this)" /></td>
      </tr>
      <tr>
        <td>
          <input
            type="text"
            value="小红"
            style="text-align: center; border: none; outline: none"
          />
        </td>
        <td>
          <input
            type="text"
            value="女"
            style="text-align: center; border: none; outline: none"
          />
        </td>
        <td>
          <input
            type="text"
            value="17"
            style="text-align: center; border: none; outline: none"
          />
        </td>
        <td>
          <input
            type="text"
            value="254765"
            style="text-align: center; border: none; outline: none"
          />
        </td>
        <td><input type="button" value="删除" onclick="delecttr(this)" /></td>
      </tr>
      <!-- <tr style="text-align: center;">
            </tr> -->
    </table>
    <table border="1" style="width: 740px; background-color: burlywood">
      <tr colspan="5">
        <button onclick="addtr()" style="margin-left: 320px">增加</button>
      </tr>
    </table>
  </body>
  <script>
    ss.onclick = function () {
      var aa = document.getElementById("one").value.toUpperCase()
      var trs = document.getElementsByTagName("tr");
      for (let i = 0; i < trs.length; i++) {
        tds = trs[i].getElementsByTagName("td")[0];

        if (tds) {
          if (tds.innerHTML.toUpperCase().indexOf(aa) > -1) {
           
            trs[i].style.display = "";
          } else {
            trs[i].style.display = "none";
          }
        }
      }
    };
    // window.onload = function addtr () {
    //     var tableobj = document.getElementById('ta');
    //     var trobj = document.getElementById('tr');
    // }
    var j = 3;
    function addtr() {
      var tableobj = document.getElementById("ta");
      var trobj = document.createElement("tr");
      // var tdobj = document.getElementById('td');
      for (var i = 0; i < 4; i++) {
        var tdobj = document.createElement("td");
        var inputobj = document.createElement("input");
        tdobj.appendChild(inputobj);
        // tdobj.innerHTML=j++;
        trobj.appendChild(tdobj);
      }
      var tdobj = document.createElement("td");
      tdobj.innerHTML =
        "<input type='button' value='删除' onclick=delecttr(this)>";
      trobj.appendChild(tdobj);
      tableobj.appendChild(trobj);
    }

    function delecttr(obj) {
      var tr = obj.parentNode.parentNode;
      tr.parentNode.removeChild(tr);
    }
  </script>
</html>
